<nz-carousel nzAutoPlay style="height: 450px">
  @for (item of list; track item) {
  <div nz-carousel-content>
    <img [src]="item.src" />
  </div>
  }
</nz-carousel>

<div class="home-content">
  <h2 class="text-center">网校课程</h2>
  <h4 class="text-center">精选网校课程，满足你的学习兴趣。</h4>
  <div nz-row [nzGutter]="16">
    <div nz-col class="gutter-row" [nzSpan]="18">
      @for(item of courseList;track item;let idx=$index) {
      <button
        nz-button
        nzType="text"
        [class]="idx === selectIndex ? 'course-type bg' : ''"
        (click)="handleSelect(idx, item.children)"
      >
        {{ item.type }}
      </button>
      }
    </div>
    <div nz-col class="gutter-row" [nzSpan]="6">
      <nz-segmented [nzOptions]="options" [(ngModel)]="index"></nz-segmented>
    </div>
  </div>

  <button (click)="add()">计时器</button>
  <div class="btn-wrapper" nz-flex [nzGap]="'middle'" [nzWrap]="'wrap'">
    @for(course of courseInfo; track course) {
    <!-- <button (click)="add()">计时器</button> -->
    <app-card
      [courseObj]="course"
      (messageEvent)="getMessage($event)"
      #child
    ></app-card>
    <!-- <app-card
      [courseObj]="course"
      (messageEvent)="getMessage($event)"
      #child
    ></app-card> -->
    }
  </div>
  <p>管道 {{ "Pipe" | uppercase }}------{{ "Pipe" | lowercase }}</p>
  <p>{{ 240 | count : "收费" }}</p>
</div>
